<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>v-bind指令</title>
</head>

<body>
  <div id="app">
    <img v-bind:src="imgUrl" height="300" width="300"/>
    <!-- 简写的话可以直接省略v-bind -->
    <img :src="imgUrl" height="300" width="300"/>
  </div>

  <!-- 导入开发版本的Vue.js  -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 创建Vue实例对象, 设置el属性和data属性
    var app = new Vue({
      el: '#app',
      data: {
        imgUrl: "https://cdn2.thecatapi.com/images/73q.jpg",
      },
      methods: {
        start: function () {
            this.loadURL();
            setInterval(this.loadURL, 3000);
        },
        loadURL: function() {
            var _this = this;
            ajax_get('https://api.thecatapi.com/v1/images/search?size=full', function(data) {
                var url = data[0]["url"];
                console.log("url: " + url);
                _this.imgUrl = url;
            });
        },
      }
    });  

    app.start();

  // 定义网络请求函数
  function ajax_get(url, callback) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            // console.log('responseText:' + xmlhttp.responseText);
            try {
                var data = JSON.parse(xmlhttp.responseText);
            } catch (err) {
                console.log(err.message + " in " + xmlhttp.responseText);
                return;
            }
            callback(data);
        }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
  }
  </script>
</body>

</html>